<!DOCTYPE html>
<style>
div {
  position: absolute;
}
/* Hide the scrollbar and scroll corner of #resize to show the resizer only. */
#resize::-webkit-scrollbar {
  width: 20px;
  height: 20px;
  opacity: 0;
}
#resize::-webkit-scrollbar-corner {
  opacity: 0;
}
</style>
<div style="width: 100px; height: 100px">
  <!-- matches the horizontal scrollbar -->
  <div style="width: 20px; height: 100px; right: 0; top: 0; background: blue"></div>
  <!-- matches the vertical scrollbar -->
  <div style="width: 100px; height: 20px; left: 0; bottom: 0; background: blue"></div>
  <!-- matches the scroll corner -->
  <div style="width: 20px; height: 20px; right: 0; bottom: 0; background: yellow"></div>
  <!-- matches the horizontal scrollbar thumb -->
  <div style="width: 20px; height: 20px; left: 0; bottom: 0; background: green"></div>
  <!-- matches the vertical scrollbar thumb -->
  <div style="width: 20px; height: 40px; top: 0; right: 0; background: green"></div>
  <!-- matches the resizer -->
  <div id="resize" style="width: 100px; height: 100px; left: 0; top: 0; resize: both; overflow: scroll"></div>
</div>
